import React from 'react'
import { StyleSheet, Text, View, SafeAreaView, SectionList, Image, TouchableOpacity } from 'react-native';

const GoodsOperation = (props) => {
    const item = props.item
    return (
        <View style={styles.container}>
            {props.count === 0 || item.skuList.length !== 0 ?
                <></> :
                <TouchableOpacity onPress={() => props.handleShopListChange(item.id, -1, item.price)}>
                    <Image style={styles.icon} source={require('../assets/minus.png')} />
                </TouchableOpacity>
            }
            {props.count !== 0 && item.skuList.length !== 0 ?
                <TouchableOpacity onPress={() => props.handleShopListChange(item.id, -1, item.price)}>
                    <Image style={styles.icon} source={require('../assets/minus.png')} />
                </TouchableOpacity>
                : <></>
            }
            {props.count === 0 ?
                <></> :
                (<Text style={styles.count}>{props.count}</Text>)
            }
            {item.skuList.length !== 0 && props.count === 0 ?
                <TouchableOpacity onPress={() => props.toggleModal(true, item)}>
                    <View style={styles.skuContainer}>
                        <Text style={styles.skuText}>选规格</Text>
                    </View>
                </TouchableOpacity>
                :
                <></>
            }
            {item.skuList.length === 0 ?
                <TouchableOpacity onPress={() => props.handleShopListChange(item.id, 1, item.price)}>
                    <Image style={styles.icon} source={require('../assets/plus.png')} />
                </TouchableOpacity>
                : <></>
            }
        </View>
    )
}

const styles = StyleSheet.create({
    skuContainer: {
        backgroundColor: '#6ea849',
        height: 20,
        width: 70,
        borderRadius: 10
    },
    skuText: {
        color: '#fff',
        fontSize: 13,
        textAlign: 'center',
        lineHeight: 20
    },
    container: {
        flexDirection: 'row'
    },
    icon: {
        width: 25,
        height: 25,
    },
    count: {
        marginLeft: 10,
        marginRight: 10,
        lineHeight: 25
    },
})

export default GoodsOperation